<template>
	<div class="body">
		<div v-for="item of content" :key='item.id'>
			<div class="chapContentHeader">
				<div>{{item.content_title}}</div>
				<hr>
			</div>
			<div>
				<div class="content">
					{{item.content_content}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios'

export default{
	name:'Content',
	data(){
		return{
			content:[]
		}
	},
	methods:{
		getChapterContent(){
			var id = this.$route.query.id;
			// console.log(id)
			axios.post('http://localhost:3000/api/user/mingzhucontentinfo',{
				id:id
			},{}).then((response)=>{
				// console.log(response.data)
				var d = []
				for(var i = 0; i < response.data.length; i++){
					var dat = JSON.stringify(response.data[i])
					// console.log(dat)
					var dat2 = JSON.parse(dat)
					// console.log(dat2)
					d.push(dat2)
					
				}
				var c = this.content = d
				// console.log(c)
			})
		}
	},
	mounted(){
		this.getChapterContent()
	}
}
</script>

<style scoped>
.body{
	width: 100%;
	background: #c79853d4;
}
hr{
	margin-top: 18px;
}
.chapContentHeader{
	width: 70%;
	margin: 0 auto ;
	padding-top: 80px;
	padding-bottom: 10px;
	font-size: 35px;
	font-weight: 900;
	color: #000000;
	text-align: center;
	letter-spacing: 5px;
	background-color: #efc280b8;
}
.content{
	width: 70%;
	margin: 0 auto ;
	padding-top: 6px;
	font-size: 16px;
	font-weight: 300;
	color: #000000;
	/* text-align: center; */
	letter-spacing: 2px;
	line-height: 20px;
	background-color: #efc280b8;
}
</style>

